<template>
    <div id='publish'>
        <el-card >
            <div slot="header">
                <img src='/static/logo.png' alt=''>
                <span>问卷</span>
                <b>{{paper.title}}</b>
            </div>
            <el-card v-for="(content,index) in paper.content" :key="'con'+content.id" class='thankscard'>
                <div slot="header">
                    <span>{{index+1}}、{{content.text}}</span>
                </div>
                <!-- card body -->
                <el-radio v-for="item in items" :key="'item'+item.id" :label="item.id" v-model='paper.content[index].answer'>{{item.text}}</el-radio>
                
            </el-card>
            <el-card :body-style="{ padding: '0px' }">
                <div slot="header">
                    <span>建议</span>
                </div>
                <el-input v-model="note" placeholder="请输入你的意见" type='textarea'></el-input>
            </el-card>
            <div class='publish_btnGroup'>
                <el-button type="primary" @click="save" >提交</el-button>
                <div id='publish_btn'><router-link to='/index' class='login_r'><el-button type="primary">返回首页 </el-button></router-link></div>
            </div>
            <!-- card body -->
        </el-card>
        
    </div>
</template>
<script>
export default {
  props: ["paper_id"],
  data() {
    return {
      paper: [],
      items: [],
      note: ""
    };
  },
  created() {
    this.getPaper();
  },
  methods: {
    getPaper() {
      this.$http
        .get("/papers/publish", {
          params: { paper_id: this.paper_id }
        })
        .then(result => {
          result.data.data.content = JSON.parse(result.data.data.content);
          this.paper = result.data.data;
          this.items = result.data.items;
        });
    },
    save() {
      this.$http
        .post(
          "/answer/add",
          this.$qs.stringify({
            paper_id: this.paper_id,
            content: JSON.stringify(this.paper.content),
            items: JSON.stringify(this.items),
            note: this.note
          })
        )
        .then(result => {
          console.log(result);
          if (
            this.jq(".el-card__body>.is-checked").length !==
            this.jq(".thankscard").length
          ) {
            this.$message({
              showClose: true,
              message: "请全部选择再提交！！！",
              type: "error"
            });
            return;
          } else {
            if (result.data.error == 0) {
              this.$router.push({ name: "thanks" });
              return;
            } else {
              this.$message({
                showClose: true,
                message: "问卷已提交,请避免重复提交",
                type: "error"
              });
              return;
            }
          }
        });
    }
  }
};
</script>
<style>
.el-card {
  margin-bottom: 10px;
}
#publish_btn{
  display: inline-block;
  margin-left:2rem;
}
.publish_btnGroup{
  width:100%;
  text-align:center;
}
</style>

